<template>
  <div class="page-container">
    <div class="control-container template-table-container">
      <div class="preview-panel">
        <div class="panel-title">模板区域</div>
        <div class="table-btn-panel">
          <el-button type="primary">添加表单</el-button>
          <el-button>添加表格</el-button>
        </div>
        <div class="tempalte-table-panel">
          <div class="panel-sub-title">表单区域</div>
          <div class="template-form">
            <div class="form-item">
              <div class="item-label max">
                <el-input placeholder="请输入标题" />
              </div>
              <div class="item-value">
                <el-input />
              </div>
            </div>
          </div>
          <div class="panel-sub-title">表格区域</div>
          <table class="tempalte-table">
            <tr v-for="(item,index) in tableObj" :key="index">
              <template v-for="(td,i) in item">
                <td :key="index+''+i" :class="index === 0 ?'header':''">
                  <template v-if="td.type === 'select'">
                    <el-select v-model="td.value" style="width: 100%;">
                      <el-option label="请选择" />
                    </el-select>
                  </template>
                  <template v-else-if="td.type === 'date'">
                    <el-date-picker
                      v-model="td.value"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                    />
                  </template>
                  <template v-else-if="td.type === 'file'">
                    <el-input v-model="td.value" placeholder="点击上传文件" readonly />
                  </template>
                  <template v-else>
                    <el-input v-model="td.value" @focus="showTdDesc(index,i)" @input="(v)=>handleInput(v,index,i)" />
                  </template>

                </td>
              </template>
              <td class="btn">
                <el-button v-if="index === 0" icon="el-icon-plus" circle @click="addCol" />
                <el-button v-else icon="el-icon-minus" circle @click="delRow(index)" />
              </td>
            </tr>
            <tr>
              <template v-for="(item,index) in tableObj[0]">
                <td v-if="index === 0" :key="index+'_bottom_btn'" class="btn">
                  <el-button icon="el-icon-plus" circle @click="addRow" />
                </td>
                <td v-else :key="index+'_bottom_btn'" class="btn">
                  <el-button icon="el-icon-minus" circle @click="delCol(index)" />
                </td>
              </template>

            </tr>
          </table>
          <div style="color: #666;font-size: 14px;">
            {{ tableObj }}
          </div>
        </div>

      </div>
      <div class="form-panel">
        <div class="panel-title">节点属性</div>
        <div class="form-item">
          <div class="item-label">节点类型</div>
          <div class="item-value">
            <el-select v-model="node.type" :disabled="currentTrIndex === 0" @change="typeSelectChange">
              <el-option value="text" label="文本" />
              <el-option value="date" label="日期选择" />
              <el-option value="select" label="选择框" />
              <el-option value="file" label="文件" />
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <div class="item-label">节点值</div>
          <div class="item-value">
            <el-input v-model="node.value" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getPage, del } from '@/api/system/roles'
import { parseTime, getDictLabel } from '@/utils/index'

export default {
  name: 'SystemRolePage',
  components: {
  },
  data() {
    return {
      tableObj: [[{
        type: 'text',
        value: null
      }]],
      node: {
        type: null,
        value: null
      },
      currentTrIndex: -1,
      currentTdIndex: -1
    }
  },
  created() {
    this.initData()
  },
  methods: {
    parseTime, getDictLabel,
    addCol() {
      this.tableObj.map(item => {
        item.push({
          type: 'text',
          value: null
        })
      })
    },
    delCol(i) {
      this.tableObj.map(item => {
        item.splice(i, 1)
      })
    },
    addRow() {
      const len = this.tableObj[0].length
      const row = []
      for (let i = 0; i < len; i++) {
        row.push({
          type: 'text',
          value: null
        })
      }
      this.tableObj.push(row)
    },
    delRow(index) {
      this.tableObj.splice(index, 1)
    },
    handleInput(val, index, i) {
      this.node.value = val
    },
    typeSelectChange(type) {
      if (this.currentTrIndex !== -1 && this.currentTdIndex !== -1) {
        const temp = this.tableObj[this.currentTrIndex][this.currentTdIndex]
        temp.value = null
        temp.type = type
        this.$set(this.tableObj[this.currentTrIndex], this.currentTdIndex, temp)
      }
    },
    showTdDesc(i, j) {
      this.currentTrIndex = i
      this.currentTdIndex = j
      const obj = this.tableObj[i]
      this.node = {
        type: obj[j].type,
        value: obj[j].value
      }
    },
    initData() {

    }

  }
}
</script>

<style lang="scss">
.template-table-container{
  display: flex;
  padding: 0 20px 20px 20px;
  .panel-title{
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }
  .panel-sub-title{
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  .table-btn-panel{

  }
  .tempalte-table-panel{
    width: 550px;
    margin: 0 auto;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    padding: 10px 20px;
  }
  .tempalte-table{
    border-collapse: collapse;
  }
  .tempalte-table td{
    border: 1px solid #ddd;
    &.header{
      background: rgba(30, 154, 202,0.5)
    }
    .el-input__inner{
      background: inherit;
      border: 0px;
    }
    &.btn{
      border: 0px;
      .is-circle{
        padding: 5px;
        background: #72c853;
        color: #fff;
        border: 0;
      }
    }
  }
  .preview-panel{
    flex: 1;
    box-shadow: 2px 2px 2px #ddd;

  }
  .form-panel{
    flex: 0 0 320px;
    margin-left: 20px;
    box-shadow: 2px 2px 2px #ddd;
    padding: 0px 10px;

  }
  .form-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-select{
      width: 100%;
    }
    .item-label{
      flex: 0 0 80px;
      font-size: 14px;
      &.max{
        flex: 0 0 150px;
      }
    }
    .item-value{
      flex: 1;
    }
  }
}
</style>
